<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Cursor账号管理系统</title>
    <!-- Bootstrap 5 CSS -->
    <link href="static/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome 图标 -->
    <link rel="stylesheet" href="static/css/all.min.css">
    <!-- 自定义样式 -->
    <link href="static/css/styles.css" rel="stylesheet">
    <!-- 添加现代字体 -->
    <link href="static/css/css2" rel="stylesheet">
    <!-- 添加动画库 -->
    <link href="static/css/animate.min.css" rel="stylesheet">
</head>

<body class="app-layout">
    <!-- 烟花动画画布 -->
    <canvas id="fireworks-canvas"></canvas>

    <!-- 加载中遮罩 -->
    <div class="loading-overlay" id="loading-overlay">
        <button type="button" class="close-overlay" aria-label="关闭">
            <i class="fas fa-times fa-lg"></i>
        </button>
        <div class="spinner-container">
            <div class="spinner-border text-primary" role="status">
                <span class="visually-hidden">加载中...</span>
            </div>
            <p class="mt-2 mb-0">加载中，请稍候...</p>
        </div>
    </div>

    <!-- 通知容器 -->
    <div id="alert-container"></div>

    <!-- 侧边栏菜单 -->
    <div id="sidebar">
        <div class="sidebar-header">
            <!-- <img src="static/img/logo.png" alt="Cursor Logo" class="logo-img"> -->
            <h4>Cursor账号管理</h4>
        </div>
        <ul class="nav-menu">
            <li class="nav-item">
                <a href="#" class="nav-link active" data-page="tasks-accounts">
                    <i class="fas fa-users"></i>
                    <span>账号管理</span>
                </a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link" data-page="system-config">
                    <i class="fas fa-cog"></i>
                    <span>系统配置</span>
                </a>
            </li>
        </ul>
        <div class="sidebar-footer">
            <span>版本: 1.0.0</span>
        </div>
    </div>

    <!-- 主内容区域 -->
    <div id="content">
        <!-- 保留原有的页面结构，只添加页面包装器 -->
        <div id="tasks-accounts" class="page-content active">
            <div class="row mb-4">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header bg-white d-flex justify-content-between align-items-center">
                            <h5 class="mb-0">任务控制</h5>
                            <div id="registration-status" class="badge bg-success">空闲中</div>
                        </div>
                        <div class="card-body">
                            <div class="row align-items-center">
                                <div class="col-md-6">
                                    <div id="task-status">
                                        <div class="d-flex align-items-center">
                                            <i class="fas fa-check-circle text-success me-2"></i>
                                            <span id="task-status-text">系统空闲中，可以开始新任务</span>
                                        </div>

                                        <!-- 账号使用情况显示 -->
                                        <div class="usage-info mt-2">
                                            <div class="usage-numbers">
                                                <span class="used-count" id="current-count">0</span>
                                                <span class="separator">/</span>
                                                <span class="total-count" id="max-accounts">10</span>
                                                <span class="remaining-count" id="remaining-slots">剩余: 10</span>
                                            </div>
                                            <div class="battery-progress mt-1" data-percent="0">
                                                <div class="battery-bars">
                                                    <span class="battery-bar"></span>
                                                    <span class="battery-bar"></span>
                                                    <span class="battery-bar"></span>
                                                    <span class="battery-bar"></span>
                                                    <span class="battery-bar"></span>
                                                    <span class="battery-bar"></span>
                                                    <span class="battery-bar"></span>
                                                    <span class="battery-bar"></span>
                                                    <span class="battery-bar"></span>
                                                    <span class="battery-bar"></span>
                                                </div>
                                                <span class="battery-percent">0%</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 text-md-end mt-3 mt-md-0">
                                    <button id="refresh-btn" class="btn btn-outline-secondary me-2"
                                        style="display: none;">
                                        <i class="fas fa-sync-alt me-1"></i> 刷新数据
                                    </button>
                                    <button id="start-registration" class="btn btn-primary me-2">
                                        <i class="fas fa-user-plus me-1"></i> 注册新账号
                                    </button>
                                    <button id="stop-registration" class="btn btn-danger" style="display: none;">
                                        <i class="fas fa-stop-circle me-1"></i> 停止任务
                                    </button>
                                </div>
                            </div>

                            <!-- 任务详细信息 -->
                            <div id="task-details" class="mt-4">
                                <div class="card border-0 bg-light">
                                    <div class="card-body py-2">
                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="small mb-2">
                                                    <span class="text-muted">上次运行: </span>
                                                    <span id="last-run">从未运行</span>
                                                </div>
                                                <div class="small mb-2">
                                                    <span class="text-muted">下次运行: </span>
                                                    <span id="next-run">未排程</span>
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="small mb-2">
                                                    <span class="text-muted">总运行次数: </span>
                                                    <span id="total-runs">0</span>
                                                </div>
                                                <div class="small">
                                                    <span class="text-muted">成功率: </span>
                                                    <span id="success-rate">N/A</span>
                                                    <span class="ms-2">
                                                        (<span class="text-success" id="successful-runs">0</span> 成功 /
                                                        <span class="text-danger" id="failed-runs">0</span> 失败)
                                                    </span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- 添加验证码获取提示 -->
                            <div class="alert alert-info mt-3" id="verification-tip-alert">
                                <button type="button" class="btn-close float-end" aria-label="关闭"
                                    onclick="$('#verification-tip-alert').hide()"></button>
                                <div class="d-flex align-items-center">
                                    <i class="fas fa-info-circle me-2"></i>
                                    <div>
                                        <strong>验证码提示：</strong> <span
                                            id="verification-tip-content">在注册过程中，系统将请求邮箱验证码。如需手动输入验证码，请留意弹窗提示并及时输入。</span>
                                    </div>
                                </div>
                            </div>

                            <div id="registration-details" class="mt-3" style="display: none;">
                                <div class="alert alert-info">
                                    <div class="d-flex align-items-center">
                                        <i class="fas fa-info-circle me-2"></i>
                                        <div>
                                            <strong>注册进度: </strong><span id="registration-progress">0%</span>
                                            <div id="registration-message">正在初始化注册流程...</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 自定义邮箱注册卡片 - 移到下方 -->
            <div class="row mb-4">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header bg-white">
                            <h5 class="mb-0">自定义邮箱注册</h5>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-8">
                                    <div class="mb-3">
                                        <label for="custom-email" class="form-label">输入邮箱地址</label>
                                        <div class="input-group">
                                            <input type="email" class="form-control" id="custom-email"
                                                placeholder="例如: your.email@example.com">
                                            <button class="btn btn-primary" type="button" id="custom-registration">
                                                <i class="fas fa-user-plus me-1"></i> 使用此邮箱注册
                                            </button>
                                        </div>
                                        <small
                                            class="text-muted">使用自定义邮箱注册时，您需要手动输入验证码。注册提交后，请检查您的邮箱收件箱或垃圾邮件文件夹，获取Cursor发送的验证码。</small>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="alert alert-info" id="custom-registration-status"
                                        style="display: none;">
                                        <div class="d-flex align-items-center">
                                            <i class="fas fa-info-circle me-2"></i>
                                            <span id="custom-registration-message">准备就绪</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 在搜索栏旁边添加排序控件 -->
            <div class="row mb-3 align-items-center">
                <div class="col-md-6">
                    <div class="d-flex align-items-center">
                        <label class="me-2 text-muted mb-0">排序方式:</label>
                        <select id="sort-field" class="form-select form-select-sm me-2" style="width: auto;">
                            <option value="created_at">创建时间</option>
                            <option value="email">邮箱</option>
                            <option value="usage_limit">余量</option>
                        </select>
                        <select id="sort-order" class="form-select form-select-sm" style="width: auto;">
                            <option value="desc">降序</option>
                            <option value="asc">升序</option>
                        </select>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="d-flex justify-content-end">
                        <div class="btn-group me-2">
                            <button class="btn btn-sm btn-outline-primary" style="width: 100px;"
                                id="export-accounts-btn">
                                <i class="fas fa-file-export me-1"></i>导出账号
                            </button>
                            <button class="btn btn-sm btn-outline-success" style="width: 100px;"
                                id="import-accounts-btn">
                                <i class="fas fa-file-import me-1"></i>导入账号
                            </button>
                        </div>
                        <div class="input-group">
                            <input type="text" id="search-input" class="form-control form-control-sm"
                                placeholder="搜索账号...">
                            <button class="btn btn-sm btn-outline-secondary" type="button" id="search-btn">
                                <i class="fas fa-search"></i>
                            </button>
                            <button class="btn btn-sm btn-outline-secondary" type="button" id="clear-search-btn">
                                <i class="fas fa-times"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 添加隐藏的文件输入 -->
            <input type="file" id="import-file-input" accept=".json" style="display: none;">

            <!-- 添加导入确认对话框 -->
            <div class="modal fade" id="import-confirm-modal" tabindex="-1" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">确认导入账号</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <p>即将导入 <span id="import-count">0</span> 个账号。</p>
                            <p>注意：同名账号将被更新覆盖。确定要继续吗？</p>
                            <div class="form-check mt-3">
                                <input class="form-check-input" type="checkbox" id="import-overwrite-check" checked>
                                <label class="form-check-label" for="import-overwrite-check">
                                    允许覆盖现有账号
                                </label>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                            <button type="button" class="btn btn-primary" id="confirm-import-btn">确认导入</button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 账号列表 -->
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header bg-white">
                            <h5 class="mb-0">账号列表</h5>
                        </div>
                        <div class="card-body p-0">
                            <div class="table-responsive">
                                <table class="table table-hover align-middle mb-0">
                                    <thead>
                                        <tr>
                                            <th>序号</th>
                                            <th>邮箱</th>
                                            <th>密码</th>
                                            <th>TOKEN</th>
                                            <th>高级使用</th>
                                            <th>创建时间</th>
                                            <th>余量</th>
                                            <th>操作</th>
                                        </tr>
                                    </thead>
                                    <tbody id="accounts-tbody">
                                        <!-- 账号数据将通过JavaScript动态填充 -->
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 重新设计分页控件 -->
            <div class="pagination-container mt-3">
                <div class="d-flex justify-content-between align-items-center">
                    <div class="pagination-info">
                        共 <span id="total-accounts" class="fw-bold text-primary">0</span> 个账号，
                        第 <span id="current-page" class="fw-bold">1</span>/<span id="total-pages">1</span> 页
                    </div>

                    <nav aria-label="账号分页">
                        <ul class="pagination mb-0">
                            <li class="page-item" id="prev-page">
                                <a class="page-link" href="#" aria-label="上一页">
                                    <i class="fas fa-angle-left"></i>
                                </a>
                            </li>
                            <li class="page-item page-number active"><a class="page-link" href="#" data-page="1">1</a>
                            </li>
                            <!-- 页码会动态生成 -->
                            <li class="page-item" id="next-page">
                                <a class="page-link" href="#" aria-label="下一页">
                                    <i class="fas fa-angle-right"></i>
                                </a>
                            </li>
                        </ul>
                    </nav>

                    <div class="per-page-selector">
                        <select id="per-page" class="form-select form-select-sm">
                            <option value="10">每页10条</option>
                            <option value="20">每页20条</option>
                            <option value="50">每页50条</option>
                            <option value="100">每页100条</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>

        <!-- 系统配置页面 -->
        <div id="system-config" class="page-content">
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header bg-white d-flex justify-content-between align-items-center">
                            <h5 class="mb-0">系统配置</h5>
                        </div>
                        <div class="card-body">
                            <!-- 保留原有的配置表单 -->
                            <form id="config-form">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="browser-headless" class="form-label">浏览器无头模式</label>
                                            <select id="browser-headless" class="form-control" disabled>
                                                <option value="true">是 (无界面)</option>
                                                <option value="false">否 (有界面)</option>
                                            </select>
                                            <small class="text-muted">True=无界面运行浏览器，False=显示浏览器界面</small>
                                        </div>
                                        <div class="mb-3">
                                            <label for="dynamic-useragent"
                                                class="form-label">动态User-Agent（先不要配置）</label>
                                            <div class="form-check form-switch">
                                                <input class="form-check-input" type="checkbox" role="switch"
                                                    id="dynamic-useragent" disabled>
                                                <label class="form-check-label"
                                                    for="dynamic-useragent">启用动态User-Agent</label>
                                            </div>
                                            <small class="text-muted">（建议不要）启用后将从预设的UA列表中随机选择，无需手动配置User-Agent</small>
                                        </div>
                                        <div class="mb-3" id="useragent-input-container">
                                            <label for="browser-useragent" class="form-label">浏览器User-Agent</label>
                                            <input type="text" id="browser-useragent" class="form-control" disabled>
                                            <small class="text-muted">浏览器模拟的用户代理字符串</small>
                                        </div>
                                        <div class="mb-3">
                                            <label for="browser-path" class="form-label">浏览器路径 (可选)</label>
                                            <input type="text" id="browser-path" class="form-control" disabled>
                                            <small
                                                class="text-muted">Windows下浏览器可执行文件的完整路径(示例：C:\Users\Administrator\AppData\Local\Google\Chrome\Bin\chrome.exe)</small>
                                        </div>
                                        <div class="mb-3">
                                            <label for="accounts-limit" class="form-label">最大账号数量</label>
                                            <input type="number" id="accounts-limit" class="form-control" min="1"
                                                disabled>
                                            <small class="text-muted">系统允许创建的最大账号数量</small>
                                        </div>

                                        <!-- 验证码获取方式 -->
                                        <div class="mb-3">
                                            <label for="captcha-method" class="form-label">验证码获取方式</label>
                                            <select id="captcha-method" class="form-control" disabled>
                                                <option value="API">API自动获取</option>
                                                <option value="INPUT">控制台手动输入</option>
                                            </select>
                                            <small class="text-muted">选择验证码的获取方式：API自动获取或通过控制台手动输入</small>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="email-type" class="form-label">邮箱类型</label>
                                            <select id="email-type" class="form-control" disabled>
                                                <option value="tempemail">TempEmail（https://tempmail.plus/）</option>
                                                <option value="zmail">ZMail（https://zmail.plus/）</option>
                                            </select>
                                            <small class="text-muted">选择用于注册的临时邮箱服务类型</small>
                                        </div>
                                        <div class="mb-3">
                                            <label for="email-domains" class="form-label">邮箱域名</label>
                                            <input type="text" id="email-domains" class="form-control" disabled>
                                            <small class="text-muted">用于注册的邮箱域名，多个域名用逗号分隔</small>
                                        </div>

                                        <!-- TempEmail相关字段 -->
                                        <div id="tempemail-fields">
                                            <div class="mb-3">
                                                <label for="email-username" class="form-label">临时邮箱用户名</label>
                                                <input type="text" id="email-username" class="form-control" disabled
                                                    placeholder="加载中...">
                                                <small class="text-muted">用于接收验证码的临时邮箱用户名（不需要输入@及后面的部分）</small>
                                            </div>
                                            <div class="mb-3">
                                                <label for="email-pin" class="form-label">临时邮箱PIN</label>
                                                <input type="text" id="email-pin" class="form-control" disabled>
                                                <small class="text-muted">临时邮箱PIN码（如果需要）</small>
                                            </div>
                                        </div>

                                        <!-- ZMail相关字段 -->
                                        <div id="zmail-fields" style="display: none;">
                                            <div class="mb-3">
                                                <label for="email-api" class="form-label">邮箱API</label>
                                                <input type="text" id="email-api" class="form-control" disabled>
                                                <small class="text-muted">ZMail API地址</small>
                                            </div>
                                            <div class="mb-3">
                                                <label for="email-proxy-enabled" class="form-label">邮箱代理</label>
                                                <div class="form-check form-switch">
                                                    <input class="form-check-input" type="checkbox" role="switch"
                                                        id="email-proxy-enabled" disabled>
                                                    <label class="form-check-label"
                                                        for="email-proxy-enabled">启用邮箱代理</label>
                                                </div>
                                                <small class="text-muted">是否启用邮箱API代理</small>
                                            </div>
                                            <div class="mb-3" id="email-proxy-address-container">
                                                <label for="email-proxy-address" class="form-label">邮箱代理地址</label>
                                                <input type="text" id="email-proxy-address" class="form-control"
                                                    disabled>
                                                <small class="text-muted">邮箱API代理服务器地址</small>
                                            </div>
                                        </div>
                                        <div class="mb-3">
                                            <label for="cursor-path" class="form-label">Cursor路径 (可选)</label>
                                            <input type="text" id="cursor-path" class="form-control" disabled>
                                            <small class="text-muted">Cursor安装目录的完整路径(示例：D:\devtools\cursor)</small>
                                        </div>
                                    </div>
                                    <!-- 在系统配置表单中添加代理设置部分 -->
                                    <div class="config-section card mb-3">
                                        <div class="card-header bg-light">
                                            <h5 class="mb-0">代理服务器设置</h5>
                                        </div>
                                        <div class="card-body">
                                            <div class="form-check form-switch mb-3">
                                                <input class="form-check-input" type="checkbox" role="switch"
                                                    id="use-proxy" disabled name="USE_PROXY">
                                                <label class="form-check-label" for="use-proxy">启用代理服务器</label>
                                            </div>

                                            <div id="proxy-settings" class="mb-3">
                                                <div class="row mb-3">
                                                    <div class="col-md-6">
                                                        <label for="proxy-type" class="form-label">代理类型</label>
                                                        <select class="form-select" id="proxy-type" disabled
                                                            name="PROXY_TYPE">
                                                            <option value="http">HTTP</option>
                                                            <option value="https">HTTPS</option>
                                                            <option value="socks4">SOCKS4</option>
                                                            <option value="socks5">SOCKS5</option>
                                                        </select>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <label for="proxy-host" class="form-label">代理服务器地址</label>
                                                        <input type="text" class="form-control" id="proxy-host" disabled
                                                            name="PROXY_HOST" placeholder="例如: 127.0.0.1">
                                                    </div>
                                                </div>
                                                <div class="row mb-3">
                                                    <div class="col-md-6">
                                                        <label for="proxy-port" class="form-label">代理服务器端口</label>
                                                        <input type="number" class="form-control" id="proxy-port"
                                                            disabled name="PROXY_PORT" placeholder="例如: 7890">
                                                    </div>
                                                    <div class="col-md-6">
                                                        <label for="proxy-timeout" class="form-label">超时时间 (秒)</label>
                                                        <input type="number" class="form-control" id="proxy-timeout"
                                                            disabled name="PROXY_TIMEOUT" value="10">
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-md-6">
                                                        <label for="proxy-username" class="form-label">用户名 (可选)</label>
                                                        <input type="text" class="form-control" id="proxy-username"
                                                            disabled name="PROXY_USERNAME" placeholder="认证用户名">
                                                    </div>
                                                    <div class="col-md-6">
                                                        <label for="proxy-password" class="form-label">密码 (可选)</label>
                                                        <input type="password" class="form-control" id="proxy-password"
                                                            disabled name="PROXY_PASSWORD" placeholder="认证密码">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- 将按钮容器从text-end改为新的栅格布局 -->
                                    <div class="row config-actions" id="config-actions" style="display:none">
                                        <div class="col-6 pe-1">
                                            <button type="button" id="cancel-config-btn"
                                                class="btn btn-secondary w-100">取消</button>
                                        </div>
                                        <div class="col-6 ps-1">
                                            <button type="submit" id="save-config-btn"
                                                class="btn btn-success w-100">保存配置</button>
                                        </div>
                                    </div>
                            </form>

                            <div class="text-center">
                                <button id="edit-config-btn" class="btn btn-warning position-relative">
                                    <i class="fas fa-edit me-1"></i> 编辑配置
                                    <span class="position-absolute badge rounded-pill bg-danger">
                                        <i class="fas fa-pencil-alt fa-xs"></i>
                                        <span class="visually-hidden">编辑提示</span>
                                    </span>
                                </button>
                            </div>
                        </div>
                        <!-- 在系统配置区域添加重置机器ID按钮 -->
                        <div class="config-section card mb-3">
                            <div class="card-header bg-light">
                                <h5 class="mb-0">系统维护</h5>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-6">
                                        <button id="restart-service-btn" class="btn btn-primary w-100">
                                            <i class="fas fa-sync-alt me-2"></i>重启服务
                                        </button>
                                        <p class="text-muted small mt-1">某些配置更改需要重启服务才能生效</p>
                                    </div>
                                    <div class="col-md-6">
                                        <button id="reset-machine-btn" class="btn btn-danger w-100">
                                            <i class="fas fa-microchip me-2"></i>重置机器ID（慎用，实测切换了一下账号直接被Cursor封了。。。）
                                        </button>
                                        <p class="text-muted small mt-1">解决设备绑定或配额限制问题</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 删除确认对话框 -->
    <div class="modal fade" id="deleteConfirmModal" tabindex="-1" aria-labelledby="deleteConfirmModalLabel"
        aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="deleteConfirmModalLabel">确认删除</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p>确定要删除此账号吗？此操作不可恢复。</p>
                    <p class="text-danger fw-bold">邮箱: <span id="deleteEmailConfirm"></span></p>
                    <p class="text-muted">ID: <span id="deleteIdConfirm"></span></p>
                    <input type="hidden" id="deleteAccountId" value="">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-danger" id="confirmDeleteBtn">删除</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Token查看模态框 -->
    <div class="modal fade" id="tokenViewModal" tabindex="-1" aria-labelledby="tokenViewModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="tokenViewModalLabel">查看Token</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="tokenFullText" class="form-label">完整Token:</label>
                        <div class="input-group">
                            <textarea id="tokenFullText" class="form-control" rows="5" readonly></textarea>
                            <button class="btn btn-outline-primary copy-btn" type="button" id="copyTokenBtn"
                                title="复制Token">
                                <i class="fas fa-copy"></i>
                            </button>
                        </div>
                    </div>
                    <div class="text-muted small">此Token用于Cursor客户端身份验证，请妥善保管</div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" id="useTokenBtn" data-account-id="">
                        <i class="fas fa-plug"></i> 使用此Token
                    </button>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 账号使用记录模态框 -->
    <div class="modal fade" id="usageRecordModal" tabindex="-1" aria-labelledby="usageRecordModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="usageRecordModalLabel">账号使用记录</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <strong>账号邮箱:</strong> <span id="recordEmail"></span>
                    </div>
                    <div class="table-responsive">
                        <table class="table table-hover table-sm align-middle">
                            <thead>
                                <tr>
                                    <th>使用时间</th>
                                    <th>使用者IP</th>
                                    <th>使用者UA</th>
                                </tr>
                            </thead>
                            <tbody id="usageRecordBody">
                                <!-- 记录将被动态填充 -->
                            </tbody>
                        </table>
                    </div>
                    <div id="no-records" class="text-center p-4" style="display: none;">
                        <i class="fas fa-history fa-2x text-muted mb-2"></i>
                        <p>暂无使用记录</p>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 自动刷新指示器 -->
    <div class="position-fixed bottom-0 end-0 p-3" style="z-index: 5">
        <div class="d-flex align-items-center small text-muted">
            <span class="me-2">自动刷新（10秒/次）</span>
            <div class="spinner-border spinner-border-sm text-secondary" role="status"
                style="width: 0.8rem; height: 0.8rem;">
                <span class="visually-hidden">Loading...</span>
            </div>
        </div>
    </div>

    <!-- 验证码输入模态框 -->
    <div class="modal fade" id="codeInputModal" tabindex="-1" aria-labelledby="codeInputModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="codeInputModalLabel">输入验证码</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p>请检查以下邮箱中收到的验证码：</p>
                    <p class="fw-bold text-primary" id="verificationEmailDisplay"></p>

                    <!-- 添加验证码提示信息区域 -->
                    <div id="verification-message"></div>

                    <div class="alert alert-info">
                        <i class="fas fa-info-circle me-2"></i>
                        <span id="verification-code-hint">通常验证码为6位数字，在邮件正文中</span>
                    </div>
                    <div class="mb-3">
                        <label for="verificationCode" class="form-label">验证码</label>
                        <input type="text" class="form-control" id="verificationCode" placeholder="输入验证码" maxlength="6">
                    </div>
                    <input type="hidden" id="pendingEmailId" value="">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="submitCodeBtn">提交验证码</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Bootstrap JS -->
    <script src="static/js/bootstrap.bundle.min.js"></script>
    <!-- jQuery -->
    <script src="static/js/jquery-3.6.0.min.js"></script>
    <!-- 原有业务逻辑 JS -->
    <script src="static/js/app.js"></script>
    <!-- 添加菜单交互 JS -->
    <script src="static/js/menu.js"></script>
</body>

</html>